//成绩 录入
/* 
打开页面的时候调用一个函数 
发送请求 获取数据 渲染页面
 */
const tbody = document.querySelector('tbody');
function getScorelist() {
    axios.get('/score/list')
        .then(result => {
            // console.log(result);
            //渲染页面
            const obj = result.data.data
            //console.log(obj);
            let html = ''
            for (const key in obj) {

                const tempHTML = obj[key].score.reduce((h, v, i) => h + `
                
                <td class="score" '>${v} <input data-id=${key} data-batch=${i + 1} type='text' value='' /></td>`, '')



                html += `<tr>
                <th scope="row">${key}</th>
                <td>${obj[key].name}</td>
                ${tempHTML}
              </tr>`

            }
            tbody.innerHTML = html
            const inputs = document.querySelectorAll('tbody input');
            /* 2 失去焦点 结束修改
                1 给input标签绑定 失去焦点事件 (不能使用事件委托了， 因为只有表单标签存在失去焦点事件)
                2 获取到输入框里面的内容，拼接成参数 发送给后端 完成编辑
                3 后端响应 编辑成功
                1 弹出一个提示
                2 重新获取最新的数据
 */
            //失去焦点事件

            inputs.forEach(input => {

                input.addEventListener('blur', function (e) {

                    // console.log(input.dataset.id);
                    // console.log(input.dataset.batch);
                    const data = {
                        "stu_id": input.dataset.id,

                        "batch": input.dataset.batch,

                        "score": input.value
                    }
                    axios.post('/score/entry', data)
                        .then(result => {
                            if (result.data.code === 0) {
                                toastr.success(result.data.message)
                                //获取最新数据 渲染
                                getScorelist()
                            }
                        })
                })
            })
        })






}
//调用函数
getScorelist()

/* 2 修改成绩
1 双击 单元格 开始修改
  1 找准元素 score类 再去绑定双击事件- 有些元素 不需要 双击事件
  2 双击事件触发了
  3 控制单元格对应的input标签显示 即可
  4 控制input标签 里面的value 等于 单元格里面的内容
  5 控制被点击的 */

//事件委托-- 双击事件
tbody.addEventListener('dblclick', function (e) {
    const dom = e.target
    if (dom.nodeName = 'TD' && dom.classList.contains('score')) {

        //e,target里面的input标签
        const input = dom.querySelector('input');
        //因为有display 属性 默认为none  现在需要block
        input.style.display = 'block'

        //控制input标签 里面的value 等于 单元格里面的内容 输入框里
        input.value = dom.innerText

        //失去焦点 可以明显一点
        input.blur()
    }
})



